<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>管理员后台</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #f5f7fa, #c3cfe2);
            min-height: 100vh;
        }

        h2 {
            text-align: center;
            margin-top: 40px;
            color: #2e3b4e;
            font-weight: 600;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 40px;
            padding: 40px;
        }

        .card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin: 0 auto;
            width: 70%;
            transition: transform 0.3s ease-in-out;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-8px);
        }

        .card h3 {
            text-align: center;
        }

        form input[type="text"],
        form input[type="password"],
        form input[type="number"],
        form select {
            width: 100%;
            padding: 12px 14px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        form input:focus,
        form select:focus {
            border-color: #4CAF50;
            outline: none;
        }

        form button {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        form button:hover {
            background-color: #45a049;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }

        th, td {
            padding: 14px 16px;
            border-bottom: 1px solid #eee;
            text-align: center;
            vertical-align: middle;
        }

        th {
            background-color: #f8f9fa;
            color: #333;
            font-weight: 600;
            text-transform: uppercase;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        .btn-delete,
        .btn-edit-info,
        .btn-edit-role {
            width: 100px;
            margin-bottom: 5px;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .btn-delete {
            background-color: #e74c3c;
            color: white;
        }

        .btn-delete:hover {
            background-color: #c0392b;
        }

        .btn-edit-info {
            background-color: #3498db;
            color: white;
        }

        .btn-edit-info:hover {
            background-color: #2980b9;
        }

        .btn-edit-role {
            background-color: rgba(14, 213, 29, 0.5);
            color: white;
        }

        .btn-edit-role:hover {
            background-color: rgba(19, 80, 22, 0.5);
        }

        footer {
            text-align: center;
            padding: 30px 20px;
            color: #777;
            font-size: 14px;
            background-color: #f9f9f9;
            border-top: 1px solid #eee;
        }

    </style>
</head>
<body>

<jsp:include page="/page/model/navbar.jsp" />

<h2>管理员后台</h2>

<div class="container">
    <!-- 注册员工 -->
    <div class="card">
        <h3>注册员工</h3>
        <p style="color: red">${error}</p>
        <form id="registerForm" action="${pageContext.request.contextPath}/register/employee" method="post" onsubmit="return validateForm()">
            <label for="username">用户名</label>
            <input type="text" name="username" id="username" placeholder="用户名" required>
            <label for="password">密码</label>
            <input type="password" name="password" id="password" placeholder="密码" required>
            <label for="confirmPassword">确认密码</label>
            <input type="password" name="confirmPassword" id="confirmPassword" placeholder="确认密码" required>
            <label for="name">姓名</label>
            <input type="text" name="name" id="name" placeholder="姓名" required>
            <label for="phone">电话</label>
            <input type="text" name="phone" id="phone" placeholder="电话" required>
            <label for="salary">工资</label>
            <input type="number" name="salary" id="salary" step="0.01" min="0" required>
            <label for="roleId">角色</label>
            <select required name="roleId" id="roleId">
                <option value="1">经理</option>
                <option value="2">维修工</option>
            </select>

            <label for="skill">技能</label>
            <select required name="skill" id="skill">
                <option value="0">仅为经理时无需选择技能</option>
                <option value="1">水电维修</option>
                <option value="2">电梯维修</option>
                <option value="3">其他</option>
            </select>

            <button type="submit">提交注册</button>
        </form>

    </div>

    <!-- 员工列表 -->
    <div class="card">
        <h3>员工列表</h3>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>工资</th>
                    <th>角色</th>
                    <th>技能</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:if test="${not empty employeeDetails}">
                    <c:forEach items="${employeeDetails}" var="employeeDetail" varStatus="loop">
                        <tr>
                            <td>${loop.index + 1}</td>
                            <td>${employeeDetail.employee.employeeId}</td>
                            <td>${employeeDetail.employee.name}</td>
                            <td>${employeeDetail.employee.phone}</td>
                            <td>${employeeDetail.employee.salary}</td>
                            <td>
                                <c:forEach items="${employeeDetail.roleNames}" var="roleName" varStatus="loop">
                                    ${roleName}
                                    <c:if test="${!loop.last}"> / </c:if>
                                </c:forEach>
                            </td>
                            <td>
                                <c:forEach items="${employeeDetail.skills}" var="skill" varStatus="loop">
                                    ${skill}
                                    <c:if test="${!loop.last}"> / </c:if>
                                </c:forEach>
                            </td>
                            <td>
                                <button class="btn-delete" onclick="window.location.href='${pageContext.request.contextPath}/delete/account?userId=${employeeDetail.employee.employeeId}'">删除</button>
                                <button class="btn-edit-info" onclick="updateEmployeeInfo('${employeeDetail.employee.employeeId}', '${employeeDetail.employee.name}', '${employeeDetail.employee.phone}', '${employeeDetail.employee.salary}')">
                                    信息修改
                                </button>
                            </td>
                        </tr>
                    </c:forEach>
                </c:if>
                <c:if test="${empty employeeDetails}">
                    <tr>
                        <td colspan="8">暂无员工信息</td>
                    </tr>
                </c:if>
            </tbody>
        </table>
    </div>

</div>

<footer>
    &copy; 2025 LILI房屋租赁系统. All rights reserved.
</footer>

<script>
    // 表单验证
    function validateForm() {
        const phoneInput = document.getElementById("phone").value.trim();
        const passwordInput = document.getElementById("password").value.trim();
        const nameInput = document.getElementById("name").value.trim();
        const roleId = document.getElementById("roleId").value;
        const skillSelect = document.getElementById("skill").value;

        // 手机号码验证
        const phoneRegex = /^1\d{10}$/;
        if (!phoneRegex.test(phoneInput)) {
            alert("请输入有效的手机号码（11位且以1开头）");
            return false;
        }

        // 密码验证
        const passwordRegex = /^(?=.*\d)[A-Za-z\d_@]{8,}$/;
        if (!passwordRegex.test(passwordInput)) {
            alert("密码至少8位，只能包含字母、数字、下划线和@符号，且必须包含至少一位数字");
            return false;
        }

        // 姓名验证
        const chineseNameRegex = /^[\u4e00-\u9fa5]+$/;
        const englishNameRegex = /^[a-zA-Z\s]+$/;
        if (!chineseNameRegex.test(nameInput) && !englishNameRegex.test(nameInput)) {
            alert("姓名只能为全中文或全英文，中文不可有空格");
            return false;
        }

        // 技能验证
        if (roleId === "2" && skillSelect === "0") {
            alert("请选择一个技能");
            return false;
        }

        return true; // 表单通过验证
    }

    function updateEmployeeInfo(employeeId,employeeName,employeePhone,employeeSalary) {
        console.log("我被执行了")
        // 获取并验证姓名
        let name = prompt("请输入新的姓名：", employeeName);
        if (name === null) name = employeeName;  // 用户点击取消则保留原值
        const chineseNameRegex = /^[\u4e00-\u9fa5]+$/;
        const englishNameRegex = /^[a-zA-Z\s]+$/;
        if (!chineseNameRegex.test(name) && !englishNameRegex.test(name)) {
            alert("姓名只能为全中文或全英文，中文不可有空格");
            return;
        }

        // 获取并验证电话号码
        let phone = prompt("请输入新的电话号码：", employeePhone);
        if (phone === null) phone = employeePhone;
        const phoneRegex = /^1\d{10}$/;
        if (!phoneRegex.test(phone)) {
            alert("请输入有效的手机号码（11位且以1开头）");
            return;
        }

        // 获取并验证工资
        let salary = prompt("请输入新的工资金额：", employeeSalary);
        if (salary === null) salary = employeeSalary;
        if (isNaN(salary) || parseFloat(salary) < 0) {
            alert("请输入有效的非负工资金额");
            return;
        }

        if (employeeName === name && employeePhone === phone && employeeSalary === salary) {
            alert("没有修改任何信息");
            return;
        }

        window.location.href = "${pageContext.request.contextPath}/update/employee?employeeId=" + employeeId + "&name=" + name + "&phone=" + phone + "&salary=" + salary;

    }



</script>

</body>
</html>
